<template>
  <div class="attendance">
    <el-input
        placeholder="请输入关键词搜索"
        prefix-icon="Search"
        style="width: 300px;margin-bottom: 10px;"
    >
      <template #append>
        <el-button type="primary" icon="Search"  />
      </template>
    </el-input>
    <el-table
        :data="itam"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f8f9fa', color: '#666' }"
    >

      <el-table-column
          prop="name"
          label="姓名"
          align="center"
      />

      <el-table-column
          prop="department"
          label="部门"
          align="center"
      />

      <el-table-column
          prop="date"
          label="补卡日期"
          align="center"
      />

      <el-table-column
          prop="reason"
          label="补卡理由"
          align="center"
      />

      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="scope">
          <el-button
              type="success"
              icon="Check"
              @click="handleApprove(scope.row)"
          >
            同意
          </el-button>
          <el-button
              type="danger"
              icon="Close"
              @click="openRejectDialog(scope.row)"
          >
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="填写拒绝理由"
        v-model="rejectDialogVisible"
        width="400px"
        :lock-scroll='false'
    >
      <el-form :model="rejectForm" >
        <el-form-item label="理由">
          <el-input
              type="textarea"
              v-model="rejectForm.reason"
              placeholder="请详细填写拒绝该补卡申请的理由"
              :rows=6
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button
              type="primary"
              @click="confirmReject"
          >
            确认拒绝
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'

const itam = reactive([
  {
    name: '小马',
    department: '研发部',
    date: '2025/08/04',
    reason: '忘记打卡了'
  }
]);


const rejectDialogVisible = ref(false);
const rejectForm = reactive({
  reason: ''
});

let currentRejectRow = {};


const handleApprove = (row) => {
  ElMessage.success('已同意该补卡')
  console.log('同意补卡申请：', row);

};

const openRejectDialog = (row) => {
  currentRejectRow = row;
  rejectForm.reason = '';
  rejectDialogVisible.value = true;
};


const confirmReject = () => {
  if (!rejectForm.reason.trim()) {
    ElMessage.error("请填写拒绝理由")
    return;
  }
  console.log('拒绝补卡申请，理由：', rejectForm.reason, '，对应申请信息：', currentRejectRow);
  rejectDialogVisible.value = false;
};
</script>

<style scoped>
.attendance {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}


.el-button + .el-button {
  margin-left: 8px;
}

.dialog-footer {
  text-align: right;
  width: 400px;
}
.el-dialog {
  transition: all 0.2s ease;
}
</style>